<!--王嘉欣-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>题解详情</title>
    <meta name="description" content="Charcoal is a free Bootstrap 4 UI kit build by @attacomsian at Wired Dots." />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!--Bootstrap 4-->
    <link rel="stylesheet" href="css/bootstrap.css">
    <style>
        /*  页码样式  */
        ul{
            height:100%;
            list-style-type:none;
        }

        li{
            line-height:20px;
            float:left;
        }
        .page_btn{
            border-radius:4px;
            border:1px solid #e5e9ef;
            background:#fff;
            margin-right:10px;
            text-align:center;
            width:25px;
            height:19px;
            line-height: 4px;
            margin-top:3px;
            outline:0;
        }

        .page_btn:hover{
            border:1px solid #4f90fb;
            color:#4f90fb;
        }

        /*    按钮样式*/
        button{
            padding-left: 20px;
            padding-right: 20px;
            padding-top: 5px;
            padding-bottom: 5px;
            color: #fff;
            background-color: #5bc0de;
            border: 0;
            border-radius: 10px;
        }
        button:hover{
            background-color: #97d3e7;
        }
        .dropbtn {
            background-color: transparent;
            color: white;
            padding-left: 35px;
            padding-right: 35px;
            font-size: 16px;
            border: none;
            cursor: pointer;
        }

        .dropdown {
            position: relative;
            display: inline-block;
            text-align: center;
        }

        .dropdown-content {
            display: none;
            position: absolute;
            background-color: #f9f9f9;
            width: 100%;;
            box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
        }

        .dropdown-content a {
            color: black;
            padding: 12px 16px;
            text-decoration: none;
            display: block;
        }

        .dropdown-content a:hover {
            background-color: #f1f1f1
        }

        .dropdown:hover .dropdown-content {
            display: block;
        }

        .dropdown:hover .dropbtn {
            background-color: transparent;
        }

        /*导航栏样式*/
        .navbar {
            background-color: #222;
        }
        #daohang {
            list-style-type: none;
            margin: 0;
            padding: 0;
            overflow: hidden;
            background-color: transparent;
        }
        li {
            float: left;
        }
        li a {
            display: block;
            color: white;
            text-align: center;
            padding: 14px 16px;
            text-decoration: none;
        }
        pre{
            color: blue;
            font-weight: bold;
            font-style:italic;
            font-size: large;
        }
    </style>
    <script src="js/dist/showdown.min.js"></script>
    <script src="js/jquery.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/ace/1.2.9/ace.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/ace/1.2.9/ext-language_tools.js"></script>
</head>
<body>
<nav class="navbar navbar-expand-md navbar-dark fixed-top sticky-navigation">
    <a class="navbar-brand font-weight-bold" href="#">题解详情</a>
    <div class="collapse navbar-collapse" id="topMenu">
        <ul class="navbar-nav ml-auto" >
            <div style="margin:5px" id="javaoj">
                <a style="color: white" href="login.html" onclick="logout()"> 退出登录</a>
                <div class="dropdown">
                    <button class="dropbtn">设置</button>
                    <div class="dropdown-content">
                        <a href="updateInfo.html">修改个人信息</a>
                        <a href="updatePassword.html">修改密码</a>
                    </div>
                </div>
            </div>
        </ul>
    </div>
</nav>
<section class="my-5 pt-5">
    <div class="container">
        <div class="row mb-2">
            <div class="col-sm-12" style="background-color: white;padding-top: 10px">
                <div><a style="float: right" onclick="goBack()">返回查看所有题解</a></div>
                <h3 id="questionTitle"></h3>
                <button onclick="goQuestion()">原题链接</button>
                <span id="degree"></span>
                <div class="mt-3 mb-5" id="txt">
                </div>
            </div>
        </div>
    </div>
</section>

<!--footer-->
<section class="py-5 bg-dark" >
    <div class="container">
        <div class="row">
            <div class="col-md-6 offset-md-3 col-sm-8 offset-sm-2 col-xs-12 text-center">
                <p class="pt-2 text-muted">
                    &copy; by <a href="aboutUs.html" target="_blank">别叫我们组</a>
                </p>
            </div>
        </div>
    </div>
</section>

<script>
    //查看全部题解的点击事件
    function goBack(){
        window.history.back();
    }
    var userId=localStorage.getItem("userId");
    getUser();
    //获取得到的答题记录id,从而得到questionId
    const answerId = getQueryString('answerId');
    var questionId;
    $.ajax({
        url:"http://192.168.47.129:8010/user/queryAnswer/" + answerId,
        type:"GET",
        success:function (data,status){
            questionId=data.data.questionId;
            //初始化解法
            getPage();
        }
    })
    function getQueryString(value) {
        const reg = new RegExp("(^|&)" + value + "=([^&]*)(&|$)", "i");
        const r = window.location.search.substr(1).match(reg);
        if (r != null) return unescape(r[2]); return null;
    }
    //发送请求获取正文的函数
    function getPage(){
        console.log("questionId:" + questionId);
        $.ajax({
            url:"http://localhost:8020/question/queryAnswer/" + answerId,
            type:"GET",
            success:function(data,status){
                //设置表格的函数
                makeRecord(data);
            },
        })
    }

    //设置正文的函数
    function makeRecord(data){
        //获取题目标题，并将其放入h3标签;获取题目难度，并将其放入span标签
        let questionTitle=document.getElementById("questionTitle");
        let degree=document.getElementById("degree");
        $.ajax({
            url:"http://localhost:8020/question/findQuestion/" + questionId,
            type:"GET",
            success:function(data,status){
                questionTitle.innerHTML=data.data.title;
                degree.innerHTML= "难度：" + data.data.degree;
            },
        })
        //将内容放入txt盒子内
        let txt=document.getElementById("txt");
        txt.style="display:block";
        //将内容循环放入网页
        //插入标题
        let title=document.createElement("h5");
        title.innerHTML="解法：";
        txt.appendChild(title);
        //插入具体内容
        let content = document.createElement("div");
        let markdownText = data.data.content;
        let texts=markdownText.split('\n');
        // 创建Showdown.js的转换器实例
        let converter = new showdown.Converter();
        for(let p of texts){
            //每行新建一个p标签
            let pp = document.createElement("p");
            ///将转化成HTML格式的内容赋值给p标签
            pp.innerHTML = converter.makeHtml(p);
            //将p标签添加到div盒子里
            content.appendChild(pp);
        }
        // 将<div>标签添加到文档中的适当位置
        document.body.appendChild(content);

        /*let content=document.createElement("p");
        content.innerHTML=data.data.content;*/
        txt.appendChild(content);
    }

    //点击按钮，跳转到题目详情页
    function goQuestion(){
        window.location.href='questionDetail.html';
    }

    //获取用户登录信息，获取失败则返回登录页面
    function getUser(){
        if (userId==null){
            location.assign("login.html");
        }
    }
    function logout(){
        localStorage.clear();
    }

</script>
</body>
</html>